<template>
  <div class="sj-button">
    <div :class="canSubmit ? 'submit-btn btn-light' : 'submit-btn btn-gray'" @click="submit">
      {{ nameStr }}
    </div>
  </div>
</template>

<script>
import commonUtils from '@/utils/common.js'
import vant from 'vant'
export default {
  props: {
    nameStr: {
      type: String,
      default: ''
    },
    tipStr: {
      type: String,
      default: ''
    },
    canSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    submit() {
      if (commonUtils.click_busy()) return
      if (!this.canSubmit) return vant.Toast(this.tipStr || '必填项不能为空')
      this.$emit('click',
        {
          value: true
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    font-size: 15px;
    border-radius: 24px;
    color: #fff;
  }

  .btn-light {
    background: rgba(38, 126, 255, 1);
  }

  .btn-gray {
    background: rgba(38, 126, 255, 0.5);
  }
</style>
